﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>axios的使用</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
    <h1>axios的使用</h1><br/>

    <div id="app">
        {{name}}
    </div>
<script src="../js/vue-2.5.16.js"></script>

<!--基于promise-->
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<script>
    var app = new Vue({
        el:'#app',
        //钩子函数
        //发起ajax的方法写created会好点
        created(){//在数据(data里的数据)被初始化后会调用，this指向的也是new Vue当前实例
            console.log('created');
            console.log(this.name);

            //在回调函数中this指向的是axios了，所以要使用箭头函数
            axios.get('./carts.json').then(resp=>{
                console.log(resp);
                this.products = resp.data;
            }).catch(error=>{
                console.log(error);
            })

             //以下这种this指向的是window对象
             axios.get('./carts.json').then(function(resp){
                 console.log(this);
             })

        },
        data:{
            name:'模版数据',
            products:[]
        },
        mounted(){
            console.log('mounted');
            console.log(this.name);
        }
    });
</script>

</body>
</html>